/*
 * @Author: liuzt
 * @Date: 2024-03-25 09:57:10
 * @LastEditors: liuzt
 * @LastEditTime: 2024-07-02 20:42:59
 * @Description: element-plus样式覆盖
 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
    $colors: (
        "primary": (
            "base": #d8af83
        )
    ),
    // $fill-color: (
    //     "lighter": #f5f8ff
    // ),
    $text-color:
        (
            "primary": #333333,
            "regular": #666666,
            "placeholder": #babac0
        ),
    $dialog: (
        "padding-primary": 16px
    ),
    $border-color: (
        "lighter": #dfe6ec
    )
);
@use "element-plus/theme-chalk/src/index.scss" as *;
.el-table {
    background-color: transparent;
    thead {
        color: #333;
    }
    th.el-table__cell {
        background-color: #ebeef5 !important;
        padding: 8px 0;
    }
    td {
        border-bottom-color: transparent !important;
        &:has(.sn-table-operate) {
            padding: 7px 0;
        }
    }
    .el-table__body {
        tr.el-table__row--striped td.el-table__cell {
            background: #f5f8ff;
        }
        tr.hover-row > td.el-table__cell {
            background-color: #faf5f6;
        }
        tr.el-table__row--striped.current-row td.el-table__cell {
            background-color: var(--el-table-current-row-bg-color);
        }
    }
    // 表格中的tooltip的最大宽度
    .el-popper {
        max-width: var(--tooltip-max-width);
    }
}
.el-pagination {
    .el-select .el-input {
        width: 100px;
    }
    &.is-background {
        .btn-prev,
        .btn-next,
        .el-pager li {
            border-radius: 5px;
            border: 1px solid #e5e5e5;
        }
    }
    .el-pagination__editor.el-input {
        width: 38px;
    }
}
.el-dialog {
    &.sn-dialog {
        border-radius: 5px;
        padding: 0;
        max-height: calc(100% - var(--el-dialog-margin-top) - 50px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        &.is-align-center {
            max-height: calc(100% - 20px);
        }
        .el-dialog__header {
            border-radius: 4px 4px 0 0;
            background: var(--theme-color);
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            position: relative;
            margin-right: initial;
            .el-dialog__title {
                color: #fff;
            }
            .el-dialog__headerbtn i {
                color: #fff;
            }
        }
        .el-dialog__body {
            padding: 30px 20px;
            flex: 1;
            overflow-y: auto;
        }
        .el-dialog__footer {
            padding: 0 20px 30px;
        }
    }
}
.el-drawer {
    &.sn-drawer {
        .el-drawer__header {
            margin-bottom: 0;

            .el-drawer__title {
                font-size: 16px;
            }
        }
    }
}
.el-form {
    &.el-form--inline-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px 10px;
        .el-form-item {
            margin-bottom: 0;
            .el-form-item__content {
                align-items: flex-start;
            }
            &.w100 {
                grid-column-start: span 2 !important;
            }
        }
    }
}
// radio管理系统样式全局修改
.el-radio__input.is-checked .el-radio__inner {
    border-color: var(--theme-color);
    background: transparent;
}
.el-radio__inner::after {
    background: var(--theme-color);
    width: 6px;
    height: 6px;
}

/* elementui的disabled样式覆盖 */
.sn-disabled {
    *[disabled],
    *:disabled,
    *.disabled,
    *.is-disabled {
        -webkit-text-fill-color: #666 !important;
    }
    .el-radio {
        .el-radio__input.is-checked.is-disabled .el-radio__inner {
            border-color: #999;
        }
        .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
            background: #999;
            width: 6px;
            height: 6px;
        }

        .el-radio__input.is-disabled .el-radio__inner {
            background-color: transparent;
            border-color: #999;
        }
    }
}
/* 系统通知的样式覆盖 */
.el-notification {
    // http.js 中样式覆盖，解决文字不折行的问题
    &.http-notice {
        .el-notification__content {
            p {
                overflow-wrap: anywhere;
            }
        }
    }
}
.el-tree {
    &.sn-tree {
        font-size: 16px;
        > .el-tree-node {
            &::before {
                bottom: -10px !important;
            }
            &:not(.is-expanded)::before {
                // display: none;
            }
        }

        .el-checkbox {
            &.is-disabled {
                // display: none;
            }
        }
        .el-tree-node__content {
            padding-left: 0 !important;
            min-height: 32px;
            height: max-content;
            position: relative;
            align-items: center;
        }
        .el-tree-node {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                top: 24px;
                left: 13px;
                bottom: -10px;
                z-index: 2;
                border-left: 1px dotted #ccc;
            }
            &.is-current:not(:has(.el-tree-node__children)):not(:has(.el-checkbox)),
            &.is-current:not(:has(.el-tree-node__children)):has(.el-checkbox.is-disabled) {
                color: var(--theme-color);
                background-color: #f5f5f5;
                border-radius: 4px;
            }
            &.is-checked {
                color: var(--theme-color);
                background-color: #f5f5f5;
                border-radius: 4px;
                .el-tree-node__expand-icon::before {
                    border-color: var(--theme-color) !important;
                }
            }
            &:nth-last-child(1),
            &:has(+ .el-tree__drop-indicator) {
                &::before {
                    display: none;
                }
            }
        }
        .el-tree-node__expand-icon {
            font-size: 16px;
            color: #999;
            &.is-leaf {
                visibility: visible;
                display: block;
                color: transparent;
                &::before {
                    content: "";
                    display: block;
                    width: 9px;
                    height: 9px;
                    border: 1px solid #999;
                    border-radius: 50%;
                    margin-left: 3.5px;
                    margin-top: 3px;
                }
            }
        }
        .el-tree-node__children {
            margin-left: 30px;
        }
        .el-tree-node__label {
            white-space: pre-wrap;
        }
    }
}
.el-image {
    .el-image__placeholder {
        background-color: transparent;
    }
}
